<template>
  <div class="main-layout">
    <div class="three-column-layout">
      <!-- Left sidebar: Categories -->
      <LeftSidebar :categories="categories" :activeCategory="activeCategory" @select-category="handleSelectCategory" />

      <!-- Main content: Article list -->
      <div class="main-content" v-infinite-scroll="loadArticles">
        <article-tabs :tabs="tabs" :currentTab="currentTab" @change-tab="handleTabChange" />

        <div class="articles-container" >
          <article-item
            v-for="article in articles"
            :key="article.id"
            :article="article"
          >
          </article-item>


        </div>
        <div v-if="isLoading" class="loading-container">
          <el-skeleton :rows="3" animated />
        </div>

        <div v-else-if="isFinished" class="empty-container">
          <el-empty description="暂无内容" />
        </div>
      </div>

      <!-- Right sidebar: Trending & Ads -->
      <RightSidebar :trending="trendingArticles" :author-ranks="authorRanks" />
    </div>
  </div>
</template>

<script setup>
import { useArticles } from '~/composables/useArticles'
import { useCategories } from '~/composables/useCategories'
// Tabs for filtering
const tabs = [
  { id: 'recommend', label: '推荐' },
  { id: 'newest', label: '最新' },
  { id: 'hottest', label: '热门' }
]
const currentTab = ref('recommend')
const  trendingArticles =ref([])
const  authorRanks =ref([])
const { categories,pending,error } = useCategories()
const activeCategory = ref('recommended')
const {articles,isLoading, isFinished, loadMore} = useArticles({
  category: 'frontend', // 初始分类
  sort: 'view_count'    // 初始排序
});

const loadArticles = () => {
  if (!isLoading && !isFinished) {
    loadMore()
  }

}
// Event handlers
const handleSelectCategory = (categoryId) => {
  activeCategory.value = categoryId
}

const handleTabChange = (tabId) => {
  currentTab.value = tabId
}

// SEO metadata
useHead({
  title: '掘金 - 代码不止，掘金不停',
  meta: [
    { name: 'description', content: '掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Product Hunt。' }
  ]
})
</script>

<style lang="scss" scoped>
.articles-container {
  padding: $spacing-sm;
}

.loading-container,
.empty-container {

  padding: $spacing-xl;
  display: flex;
  justify-content: center;
}
</style>
